<template>
  <div>
    <div v-for="(item, index) in menuItem" :key="item.menu_code">
      <el-tooltip
        class="item"
        effect="dark"
        :content="item.menu_name"
        placement="right"
      >
        <div class="wfc-menu-item">
          <el-popover
            placement="right-start"
            popper-class="wfc-menu-tooltip-box"
            v-model="isShowPopover[index]"
            :transfer="true"
            :ref="`popover${index}`"
          >
            <div class="wfc-menu-tooltip">
              <template v-for="v in item.children">
                <router-link
                  v-if="!v.children || !v.children.length"
                  :to="{ name: v.menu_code }"
                  :key="v.menu_code"
                  class="wfc-menu-tooltip__link"
                  exact
                  active-class="menu-active"
                  tag="div"
                  >{{ v.menu_name }}</router-link
                >
                <div
                  :key="v.id"
                  v-else
                  :class="[
                    'wfc-menu-tooltip__link',
                    'has-next-link',
                    nextMenuIsActive(v.menu_code) ? 'is-active' : '',
                  ]"
                >
                  {{ v.menu_name }}
                  <div class="wfc-menu-tooltip">
                    <template v-for="vc in v.children">
                      <router-link
                        :to="{ name: vc.menu_code }"
                        :key="vc.menu_code"
                        class="wfc-menu-tooltip__link"
                        exact
                        active-class="menu-active"
                        tag="div"
                        v-if="!vc.children || !vc.children.length"
                      >
                        {{ vc.menu_name }}
                      </router-link>
                      <div class="wfc-menu-tooltip" v-else :key="vc.id">
                        <div
                          :class="[
                            'wfc-menu-tooltip__link',
                            'has-next-link',
                            nextMenuIsActive(vc.menu_code) ? 'is-active' : '',
                          ]"
                        >
                          {{ vc.menu_name }}
                          <div class="wfc-menu-tooltip">
                            <router-link
                              v-for="vcc in vc.children"
                              :to="{ name: vcc.menu_code }"
                              :key="vcc.id"
                              class="wfc-menu-tooltip__link"
                              exact
                              active-class="menu-active"
                              tag="div"
                            >
                              {{ vcc.menu_name }}
                            </router-link>
                          </div>
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </template>
            </div>
            <div
              class="item-iconfont"
              :class="[
                siderMenuName === item.menu_code ? 'item-active' : '',
                item.menu_code === 'main' ? 'main-page' : '',
              ]"
              slot="reference"
            >
              <svg class="low-code" aria-hidden="true">
                <use v-bind:xlink:href="`#${item.icon}`"></use>
              </svg>
            </div>
          </el-popover>
        </div>
      </el-tooltip>
    </div>
  </div>
</template>
  
<script>
export default {
  name: "MenuLeftHide",
  props: ["menuItem", "siderMenuName"],
  data() {
    return {
      isShowPopover: [],
    };
  },
  created() {
    for (let index = 0; index < this.menuItem.length; index++) {
      this.isShowPopover.push(false);
    }
  },
  methods: {
    nextMenuIsActive(menu_code) {
      const route = this.$route;
      let currentPath = route.fullPath.split("/");
      let resPath = [];
      for (let i = 0; i < currentPath.length; i++) {
        if (currentPath[i] !== "") {
          resPath.push(currentPath[i]);
        }
      }
      resPath.shift();
      if (resPath.indexOf(menu_code) !== -1) {
        return true;
      }
      return false;
    },
  },
};
</script>
  
  <style lang="less" scoped>
.item-iconfont {
  box-sizing: border-box;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  width: 64px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  &.main-page {
    margin-top: 11px;
  }
  &:hover {
    color: #1989fa;
  }
  &:focus {
    outline: none;
  }
  &.item-active {
    position: relative;
    &::before {
      content: "";
      width: 40px;
      height: 40px;
      display: block;
      position: absolute;
      background-color: rgba(76, 120, 252, 0.15);
      border-radius: 25%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.iconfont {
  font-size: 20px;
  margin-right: 0;
  color: #1989fa;
}
.wfc-menu-tooltip__link {
  padding: 10px;
  cursor: pointer;
  &:hover,
  &.menu-active {
    background-color: #f5f5f5;
    color: #1989fa;
  }
  &.has-next-link::after {
    content: ">";
    position: absolute;
    right: 10px;
  }
  &.has-next-link:hover {
    & > div {
      color: #606266;
      display: block;
    }
  }
  &.has-next-link {
    position: relative;
    &.is-active {
      background-color: #f5f5f5;
      color: #1989fa;
    }
    & > div {
      display: none;
      position: absolute;
      right: -100%;
      top: 10px;
      background-color: #fff;
      width: 100%;
      border: 1px solid #ebeef5;
    }
  }
}
svg {
  height: 20px;
  width: 20px;
}
</style>
  